<template>
  <div class="mall_box">
    <div class="freight_box">
      <a class="mint-cell mint-field">
        <div class="mint-cell-wrapper">
          <div class="mint-cell-value">
            <div class="mint-cell-value is-link" @click="loadArea">
              <div class="mint-field-core" >{{load.title}}</div>
              <i class="wechat-arrow-down"></i>
            </div>
          </div>

          <mt-popup v-model="loadVisible" position="bottom" class="mint-popup-4">
            <div class="picker-toolbar">
              <span class="mint-datetime-action mint-datetime-cancel" @click="cancleloadarea">取消</span>
              <span class="mint-datetime-action mint-datetime-confirm" @click="selectloadarea">确定</span>
            </div>
            <mt-picker :slots="loadcitySlots" @change="onLoadChange" :visible-item-count="5" value-key="title"></mt-picker>
          </mt-popup>
        </div>
      </a>
      <a class="mint-cell mint-field">
        <div class="mint-cell-wrapper">
          <div class="mint-cell-value">
            <div class="mint-cell-value is-link" @click="unloadArea">
              <div class="mint-field-core" >{{unload.title}}</div>
              <i class="wechat-arrow-down"></i>
            </div>
          </div>
          <mt-popup v-model="unloadVisible" position="bottom" class="mint-popup-4">
            <div class="picker-toolbar">
              <span class="mint-datetime-action mint-datetime-cancel" @click="cancleunloadarea">取消</span>
              <span class="mint-datetime-action mint-datetime-confirm" @click="selectunloadarea">确定</span>
            </div>
            <mt-picker :slots="unloadcitySlots" @change="onunloadChange" :visible-item-count="5" value-key="title"></mt-picker>
          </mt-popup>
        </div>
      </a>
      <div class="freight_look">
        <mt-button size="large" @click="freight(route)">运价查询</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui';
  export default {
  name: 'hello',
  component: {
    Toast
  },
  data () {
    return {
      loadcitySlots:[{
          flex: 1,
          defaultIndex: 1,
          values: [] ,
          className: 'slot1',
          textAlign: 'center',
        }, {
          values: [],
          className: 'slot2'
        }, {
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center'
        }] ,
        unloadcitySlots:[{
          flex: 1,
          defaultIndex: 1,
          values: [] ,
          className: 'slot1',
          textAlign: 'center'
        }, {
          values: [],
          className: 'slot2'
        }, {
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center'
        }] ,
        load: {title:'始发地',adcode:''},
        unload: {title:'目的地',adcode:''},
        loaditem: {title:'始发地',adcode:''},  //临时存放地址
        unloaditem: {title:'目的地',adcode:''},
        loadVisible: false,
        unloadVisible: false,
        url: 'http://api.motu56.com',
        route: 'fcalculator',
    }
  },
  mounted () {
    this.aress()
  },
  methods: {
    loadArea () {
      this.loadVisible = true
    },
    unloadArea () {
      this.unloadVisible = true
    },
    onLoadChange(picker, values) {
      let c1 = values[0], c2 = values[1], c3 = values[2];

      let v1 = c1 !== undefined ? c1.adcode.substring(0, 2) : '',
          v2 = c2 !== undefined ? c2.adcode.substring(0, 2) : '',
          v3 = c2 !== undefined ? c2.adcode.substring(0, 4) : '',
          v4 = c3 !== undefined ? c3.adcode.substring(0, 4) : '';

      if (v1 != v2) {
          this.loadcitySlots[1].values = []
          for(let i1 in c1.childs) {
            this.loadcitySlots[1].values.push(c1.childs[i1])
          }
          this.loadcitySlots[2].values = []
          for(let i2 in this.loadcitySlots[1].values) {
            this.loadcitySlots[2].values.push(this.loadcitySlots[1].values[i2])
          }
      } else if (v3 != v4) {
        this.loadcitySlots[2].values = []
        for(let i3 in c2.childs) {
          this.loadcitySlots[2].values.push(c2.childs[i3])
        }
      } else if (c1 && c2 && c3)  {
          this.loaditem.title = c1.title + '/' + c2.title + '/' + c3.title
          this.loaditem.adcode = c3.adcode
      }
    },
    onunloadChange(picker, values) {
      let c1 = values[0], c2 = values[1], c3 = values[2];

      let v1 = c1 !== undefined ? c1.adcode.substring(0, 2) : '',
          v2 = c2 !== undefined ? c2.adcode.substring(0, 2) : '',
          v3 = c2 !== undefined ? c2.adcode.substring(0, 4) : '',
          v4 = c3 !== undefined ? c3.adcode.substring(0, 4) : '';

      if (v1 != v2) {
          this.unloadcitySlots[1].values = []
          for(let i1 in c1.childs) {
            this.unloadcitySlots[1].values.push(c1.childs[i1])
          }
          this.unloadcitySlots[2].values = []
          for(let i2 in this.unloadcitySlots[1].values) {
            this.unloadcitySlots[2].values.push(this.unloadcitySlots[1].values[i2])
          }
      } else if (v3 != v4) {
        this.unloadcitySlots[2].values = []
        for(let i3 in c2.childs) {
          this.unloadcitySlots[2].values.push(c2.childs[i3])
        }
      } else if (c1 && c2 && c3)  {
          this.unloaditem.title = c1.title + '/' + c2.title + '/' + c3.title
          this.unloaditem.adcode = c3.adcode
      }
    },
    aress () {
      let world1 = {
        "title": "全国",
        "type": "1",
        "adcode": '000000'
      }
      let world2 = {
        "title": "全国",
        "type": "2",
        "adcode": '000000'
      }
      let world3 = {
        "title": "全国",
        "type": "3",
        "adcode": '000000'
      }

      let that = this
      fetch(this.url+'/common/areas?isall=1', {
          credentials: "include"
        }).then(function(res){
        if(res.ok){
          res.json().then(function(data){
            data.result.unshift(world1,world2,world3)
            let result = data.result
            let Areas = {};
            if (result && result.length > 0) {
                for (let i = 0; i < result.length; i++) {
                    let item = result[i];
                    if (item.type == 1) {
                        Areas['adcode_' + item.adcode] = {
                            adcode: item.adcode,
                            title: item.title,
                            childs: {}
                        };
                    } else if (item.type == 2) {
                        let adcode = item.adcode.substring(0,2) + '0000'
                        Areas['adcode_' + adcode].childs['adcode_' + item.adcode] = {
                            adcode: item.adcode,
                            title: item.title,
                            childs: {}
                        };
                    } else if (item.type == 3) {
                        let adcode0 = item.adcode.substring(0,2) + '0000'
                        let adcode1 = item.adcode.substring(0,4) + '00'
                        if (Areas['adcode_' + adcode0].childs['adcode_' + adcode1]) {
                            Areas['adcode_' + adcode0].childs['adcode_' + adcode1].childs['adcode_' + item.adcode] = {
                                adcode: item.adcode,
                                title: item.title
                            };
                        }
                    }
                }
            }
            that.Areas = Areas
            for (let i1 in Areas) {
              that.loadcitySlots[0].values.push(Areas[i1])
              that.unloadcitySlots[0].values.push(Areas[i1])
            }

            for (let i2 in that.loadcitySlots[0].values[0].childs) {
              that.loadcitySlots[1].values.push(that.loadcitySlots[0].values[0].childs[i2])
            }

            for (let i2 in that.unloadcitySlots[0].values[0].childs) {
              that.unloadcitySlots[1].values.push(that.unloadcitySlots[0].values[0].childs[i2])
            }
            for(let i3 in that.loadcitySlots[1].values[0].childs) {
              that.loadcitySlots[2].values.push(that.loadcitySlots[1].values[0].childs[i3])
            }
            for(let i3 in that.unloadcitySlots[1].values[0].childs) {
              that.unloadcitySlots[2].values.push(that.unloadcitySlots[1].values[0].childs[i3])
            }
          })
        }
      }).catch(function(){})
  },
    cancleloadarea () {
      this.loadVisible = false
    },
    selectloadarea () {
      this.loadVisible = false
      this.load.title = this.loaditem.title
      this.load.adcode = this.loaditem.adcode
    },
    cancleunloadarea () {
      this.unloadVisible = false
    },
    selectunloadarea () {
      this.unloadVisible = false
      this.unload.title = this.unloaditem.title
      this.unload.adcode = this.unloaditem.adcode
    },
    freight (path) {
      if( this.load.title == '始发地' || this.unload.title == '目的地'){
        Toast('请选择始发地和目的地')
      } else {
        this.$router.goto(path, {loadAcode: this.load.adcode, unloadAcode: this.unload.adcode})
      }
    }
  }
}
</script>
<style>
  .mall_box{ height: 100%; margin-bottom: 20px; }
  .mall_box .mint-popup-bottom{ width: 100%;}
  .freight_box{ background: #edf3f3; padding: 150px 15px 0px 15px; }
  .freight_box .mint-cell-wrapper{background-image: none;}
  .freight_box .mint-cell-value .is-link{margin-right: 0px;}
  .mint-cell{ margin-top: 15px; border-radius: 10px; }
  .wechat-arrow-down{color: #999;}
  .freight_look{ margin: 20px 0px;}
  .freight_look .mint-button--default{background-color: #efd457; box-shadow:none;line-height: 50px; height: 50px;}
  .freight_look button label{ color: #101010; line-height: 50px; }
  .calculator_box{padding: 15px; background: #edf3f3;}
  .cal_center{ padding-top: 8px;  border: 1px solid #bbbbbb; border-radius: 8px; margin-top: 10px; background: #fff;}
  .cal_center_list{ display: flex; padding: 10px 15px;}
  .cal_center .cal_list{ flex: 50%;}
  .cal_center_left{ color: #e51c23; }
  .cal_center_left .wechat-money{ color: #e51c23; }
  .cal_center_right{ text-align: right; color: #787878;}
  .calculator_titles{ border-bottom: 1px solid #e6eaed; display: flex; padding: 8px 15px;}
  .calculator_titles .cal_area{ flex:45%;text-align: center;}
  .calculator_titles .cal_area span{ font-size: 14px; }
  .calculator_titles .cal_icon{ flex: 10%; padding-top: 10px;}
  .calculator_titles .wechat-arrow0-right{ font-size: 24px; }
  .cal_detail{ clear: both;width: 100%; padding: 0px 15px;}
  .cal_detail .cal_form{ display: flex; margin-top: 10px; position: relative;}
  .cal_detail .mint-cell{ margin-top: 0px; }
  .cal_detail .mint-cell-wrapper{ background-image: none; padding-right: 0px;}
  .cal_detail .mint-field .mint-cell-title{ width: 60px; }
  .cal_detail label{flex: 8%; margin-bottom: 0px; line-height: 36px;}
  .cal_detail input{flex: 75%; padding: 3px 8px;}
  .cal_detail span{ position: absolute; right: 6px; top: 6px; }
  .cal_detail .mint-field-core{ border: 1px solid #ccc; padding: 3px 5px; }
  .cal_detail .mint-field-other{ margin-left: 8px; }
  .wechat-edit{ color: #787878; }
  .recount{ margin: 15px 0px;}
  .recount .mint-button--default{background-color: #efd457; box-shadow:none;line-height: 50px; height: 50px;}
  .recount button label{ color: #101010; line-height: 50px; }
</style>
